<template>
  <div class="insp-timeLine">
    <div class="insp-timeLine-item">
      <p :class="['insp-timeLine-info', 'completeText']">开始养护</p>
      <div :class="['insp-timeLine-dot', { complete: status != 0 }, { progress: status === 0 }]"></div>
      <div :class="['insp-timeLine-border', 'active']"></div>
      <p class="insp-timeLine-info">拟定计划</p>
    </div>
    <div class="insp-timeLine-item">
      <p :class="['insp-timeLine-info', { completeText: status != 0 }, { noText: status === 0 }]">在进行中</p>
      <div :class="['insp-timeLine-dot', { progress: status === 1 }, { complete: status != 0 && status != 1 }]"></div>
      <div :class="['insp-timeLine-border', { active: status != 0 }]"></div>
      <p class="insp-timeLine-info">执行计划</p>
    </div>
    <div class="insp-timeLine-item">
      <!-- <p :class="['insp-timeLine-info',{ completeText: status === 2 || status === 3},{ noText: status === 0 || status === 1 }]">
        完成养护</p>
      <div :class="['insp-timeLine-dot',{ complete: status === 2 || status === 3 }]"></div>
      <div :class="['insp-timeLine-border',{ active: status === 2 || status === 3 }]"></div> -->

      <p :class="['insp-timeLine-info', { completeText: status === 99 || status === 99 }, { noText: status === 0 || status === 1 }]">完成养护</p>
      <div :class="['insp-timeLine-dot', { complete: status === 99 || status === 99 }]"></div>
      <div :class="['insp-timeLine-border', { active: status === 99 || status === 99 }]"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    status: {
      type: Number,
      default: 0,
    },
  },
}
</script>
<style scoped lang="scss">
@import '@/views/inspection/insp.scss';
</style>
